<template>
    <div id='entryrequestorder-index'>
        <!-- 进件申请已经完成 -->
        <loading mode="full" v-if="loading"></loading>
       <h1 class="card-title">
           <span>进件申请订单管理</span>
       </h1>
       <div class="order-form form-table">
             <div class="form-content">
                <div class="form-item">
                    <div class="form-item__key">放款人</div>
                    <div class="form-item__value">
                        <input type="tel" placeholder="请输入手机号码" v-model='lenders'>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">姓名</div>
                    <div class="form-item__value">
                        <input type="text" placeholder="请输入姓名" v-model='lendersName'>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">订单id</div>
                    <div class="form-item__value">
                        <input type="number" placeholder="请输入订单id" v-model='orderId'>
                    </div>
                </div>
                <!-- 借款人新增 -->
                <div class="form-item">
                    <div class="form-item__key">借款人</div>
                    <div class="form-item__value">
                        <input type="tel" placeholder="请输入手机号码" v-model='borrowers'>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">姓名</div>
                    <div class="form-item__value">
                        <input type="tel" placeholder="请输入姓名" v-model='borrowersName'>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">求借需求id</div>
                    <div class="form-item__value">
                        <input type="tel" placeholder="请输入求借需求id" v-model='demandId'>
                    </div>
                </div>

                <div class="form-item">
                    <div class="form-item__key">开始时间</div>
                    <div class="form-item__value">
                         <date-picker
                                color='#757575'
                                :placeholder='`选择日期`' v-model='dataTime'></date-picker>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">结束时间</div>
                    <div class="form-item__value">
                         <date-picker
                                color='#757575'
                                :placeholder='`选择日期`' v-model='dataTime1'></date-picker>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">拓展标签</div>
                    <div class="form-item__value" >
                            <select v-model="sort" class="sort">
                                <option value="">全部</option>
                                <option v-for='item in this.bayDay' :value="item">
                                        {{item}}
                                </option>          
                            </select>
                    </div>
                </div>
                 <div class="form-item">
                         <div class="form-item__key">排序规则</div>
                         <div class="form-item__value">
                             <select v-model="orderingRule" class="sort">
                                 <option value="">全部</option>
                                 <option value="1">交易时间由晚到早</option>
                                 <option value="2">消耗点券数目由大到小</option>
                             </select>
                        </div>
                 </div>
                           
            </div>
             <div  class="form-button"><span class="form-button__item button" @click='InputPieceApplyOrderManage(1)'>搜索</span></div>
       </div>
       <el-table
                            ref="multipleTable"
                            :data="tableData"
                            border
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <!-- <el-table-column
                            type="selection"
                            >
                            </el-table-column> -->
                            <el-table-column
                            prop="id"
                            label="订单ID"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.id'> {{ scope.row.id }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="phone"
                            label="放款人(出借人)手机"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.phone'> {{ scope.row.phone }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            label="放款人(出借人)姓名"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.name'> {{ scope.row.name }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="mobile"
                            label="借款人手机"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.mobile'> {{ scope.row.mobile }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="realName"
                            label="借款人姓名"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.realName'> {{ scope.row.realName }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="borrowNo"
                            label="借款线索ID"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.borrowNo'> {{ scope.row.borrowNo }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="拓展标签"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row'>
                                        <span v-if='scope.row.allocationStr'>{{ scope.row.allocationStr }}</span>
                                       <span v-else>--</span>  
                                       <!-- <span v-if='scope.row.sysUserName'>
                                           {{ scope.row.sysUserName }}
                                       </span>
                                       <span v-else>--</span>    -->
                                   </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="consumeScore"
                            label="消耗点券数"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.consumeScore'> {{ scope.row.consumeScore }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="createTime"
                            label="下单时间"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.createTime'> {{ timestampToDate(scope.row.createTime) }} </span>
                                   <span v-else>--</span>
                                </template>
                            </el-table-column>
            </el-table>
            <!-- 分页 -->
            <pagination
                :current-page='currentPage'
                :total-page='payNo.totalPage'
                 @pageChange='InputPieceApplyOrderManage'></pagination> 
    
    </div>
</template>

<script>
    import {Promise} from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import checkBox from '../components/CheckBox.vue'
    import checkBoxGroup from '../components/CheckBoxGroup.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import  {mapGetters, mapActions}  from 'vuex'
    import {addLenderValidation, resetAccountPasswordValidation, operatorEditValidation} from '../validation/validation'
    import {allApi, lenderApi} from '../api/api'
    import moment from 'moment'
    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            tabBox,
            tab,
            radio,
            checkBox,
            checkBoxGroup,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            datePicker,
        },
        filters: {
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if (boolean === true) {
                return '是'
                }
                else {
                return '否'
                }
            }
        },
        data() {
            return {
                lenders:'',
                lendersName:'',
                orderId:'',
                borrowers:'',
                borrowersName:'',
                demandId:'',
                dataTime:'',
                dataTime1:'',
                sort:'',
                orderingRule:'',
                Array:[],
                bayDay:[],
                tableData:[],
                payNo:[],
                loading:true,
            }
        },
        computed:{
              ...mapGetters([
                            'msgTip',
                            'localInfo'
                        ]),
               currentPage(){
                    if(_.isEmpty(this.payNo)) return 1
                    return this.payNo.pageNum
               }
        },
        methods:{
              ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            // transform(a){
            //     if(a=='ALLOCATED'){
            //         return '已分配'
            //     }else if(a=='NOTALLOCATED'){
            //         return '待分配'
            //     }else if(a=='HIGHSEAS'){
            //         return '公海中'
            //     }
            // },
            timestampToDate(timestamp){
                if (!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD HH:mm:ss')
                },
            findAllAllocationStr(){
                    allApi.findAllAllocationStr({})
                    .then(result => {
                        // console.log(111)
                        this.Array=result
                         let records =  _.filter(this.Array,(value,index)=>{
                        return value!==undefined&&value!==null
                        })
                        _.each(records,(value,index)=>{
                        if(value==null){
                            value=''
                        }
                        if(value){
                            if(this.bayDay.indexOf(value) == -1){  //判断在s数组中是否存在，不存在则push到s数组中
                                    this.bayDay.push(value);
                                }
                        }                     
                    })
                    })
                    .catch(error =>{
                        console.error(error)
                    })
            },
            InputPieceApplyOrderManage(num){
                this.loading = true
                allApi.InputPieceApplyOrderManage({
                    mobile:this.lenders,
                    name:this.lendersName,
                    orderId:this.orderId,
                    mobileC:this.borrowers,
                    nameC:this.borrowersName,
                    borrowNo:this.demandId,
                    startTime:this.dataTime,
                    endTime:this.dataTime1,
                    allocationStatus:this.sort,
                    rank:this.orderingRule,
                    pageNum:num,
                    pageSize:10
                })
                    .then(result =>{
                        console.log(result)
                        this.tableData=result.list[0].list
                        this.payNo=result.list[0]
                        this.loading = false
                    })
                    .catch(error =>{
                        console.error(error)
                        this.loading = false
                    })
            },handleSelectionChange(val) {
                this.multipleSelection = val;
            },
        },
        created(){
            this.findAllAllocationStr()
            this.InputPieceApplyOrderManage(1)
        },
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #entryrequestorder-index{
        width: 95%;
    }
</style>